<template>
    <div class="mine-privacy">
        <div class="mine-privacy-contain">
            <div class="mine-privacy-contain-title">
                <img src="../../../assets/mime/隐私保护.png" alt="">
                <div>
                    <h5>社交媒体</h5>
                </div>
            </div>
            <div class="mine-privacy-contain-content">
                <el-card class="mine-privacy-contain-content-card" shadow="hover">
                    <div class="mine-privacy-contain-content-card1">

                        <img src="../../../assets/mime/bg(位图 857x1024).png" alt="">

                        <div class="mine-privacy-contain-content-card1-password">
                            <h5>账号密码</h5>
                            <p>************</p>
                            <el-button @click="dialogPassVisible= true" class="mine-privacy-contain-content-card1-btn"
                                size="small">修改</el-button>
                            <el-dialog center title="修改密码" 
                            :modal-append-to-body='false'
                                :visible.sync="dialogPassVisible">
                                <el-form :rules="rules" :model="ruleForm"
                                ref="ruleForm" label-width="100px" class="demo-ruleForm"
                                status-icon>
                                    <el-form-item label="旧密码">
                                        <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="新密码" prop="pass">
                                        <el-input type="password" v-model="ruleForm.newPass" autocomplete="off">
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item label="确认密码" prop="checkPass">
                                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off">
                                        </el-input>
                                    </el-form-item>
                                </el-form>

                                <div slot="footer" class="dialog-footer">
                                    <el-button @click="dialogPassVisible = false">取 消</el-button>
                                    <el-button type="primary" @click="updateuserPassword">确 定</el-button>
                                </div>
                            </el-dialog>
                        </div>
                    </div>

                </el-card>

            </div>
        </div>

    </div>
</template>

<script>
import {
    updatePassword,
} from '../../../api/user';
export default {

    name: 'minePrivacy',
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            dialogPassVisible: false,
            ruleForm: {
                newPass: '',
                checkPass: '',
                oldPass: ''
            },
            rules: {
                pass: [
                    { validator: validatePass, trigger: 'blur' },
                    {
                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,15}$/,
                        message: '密码必须由数字、字母两种字符组成，长度在8-15位之间',
                        trigger: 'blur',
                    },
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
            }

        }
    },
    props: ['userPri'],
    components: {
    },
    mounted() {

    },
    methods: {
        updateuserPassword() {
            const data1 = {
                oldPassword: this.ruleForm.oldPass,
                newPassword: this.ruleForm.newPass
            }

            updatePassword(data1).then((res) => {
                console.log(res);
                if (res.data.code == 500) {
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: 'error'
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: '修改成功',
                        type: 'success'
                    });
                }

            }).catch((err) => {
                console.log(err);
                this.$message({
                    showClose: true,
                    message: '修改失败',
                    type: 'error'
                });
            });
            this.dialogPassVisible = false,
                    this.ruleForm = {
                        newPass: '',
                        checkPass: '',
                        oldPass: ''
                    }
        }

    }
}
</script>

<style scoped lang="less">
.mine-privacy {
    &-contain {
        align-items: center;
        justify-content: space-between;
        width: 80%;
        margin: 0 auto;

        &-title {
            display: flex;
            align-items: center;

            img {
                width: 2vw;
                height: 4.5vh;
            }

            div {
                width: 90%;
                border-bottom: 1px solid rgba(165, 214, 63, 1);

                h5 {
                    font-size: 16px;
                    font-weight: 400;
                    letter-spacing: 0.45px;
                    line-height: 0px;
                    color: #089bab;
                    margin-top: 3vh;
                }
            }
        }

        &-content {
            margin-top: 3vh;

            &-card {
                height: 30vh;
                border-radius: 30px;
                background: rgba(229, 247, 190, 1);
                display: flex;

                img {
                    width: 8vw;
                }

            }

            &-card1 {
                display: flex;
                justify-content: space-around;

                &-password {
                    width: 20vh;
                    font-size: 26px;
                    font-weight: 400;
                    color: rgba(13, 128, 120, 1);
                    margin-top: -5vh;
                    margin-left: 10vh;

                    p {
                        width: 30vh;
                        height: 4vh;

                        text-align: center;
                        border-radius: 15px;
                        background: rgba(229, 247, 190, 1);
                        border: 2px solid rgba(0, 186, 173, 1);
                    }
                }

                ::v-deep .el-dialog {
                    width: 80vh;
                    border-radius: 20px;

                    button {
                        flex: 1;
                        background-color: rgba(213, 237, 161, 1);
                        color: rgba(7, 74, 69, 1);

                        &:hover {
                            color: #fff;
                            background-color: rgba(0, 186, 173, 1);
                        }
                    }


                }

                &-btn {
                    font-size: 14px;
                    float: right;
                    color: rgba(255, 255, 255, 1);
                    text-align: center;
                    border-radius: 15px;
                    background: rgba(0, 186, 173, 1);
                    border: 1px solid rgba(0, 186, 173, 1);


                    &:hover {
                        box-shadow: 1px 1px 5px #D5EDA1;
                        background: #D5EDA1;
                    }

                }

            }
        }
    }
}
</style>
